<template>
  <el-form-item
    :rules="item.rule"
    :label="item.label"
    :prop="item.prop"
    :label-width="item.labelWidth"
  >
    <div class="mix" :class="isPEvents ? 'mininner' : ''">
      <el-date-picker
        v-model="formData[item.prop]"
        @change="item.change && item.change(formData[item.prop])"
        :disabled="disabledMethod(item)"
        :editable="item.editable === undefined ? true : item.editable"
        :align="item.align"
        :type="item.dateType === undefined ? 'date' : item.dateType"
        :format="item.format"
        :value-format="item.valueFormat"
        :placeholder="
          item.placeholder === undefined ? '请选择' : item.placeholder
        "
        :default-value="item.defaultValue"
        :start-placeholder="
          item.startPlaceholder === undefined
            ? '开始日期'
            : item.startPlaceholder
        "
        :end-placeholder="
          item.endPlaceholder === undefined ? '结束日期' : item.endPlaceholder
        "
        :default-time="item.defaultTime"
        :picker-options="pickerOptions"
        :range-separator="
          item.rangeSeparator === undefined ? '至' : item.rangeSeparator
        "
        :clearable="item.clearable === undefined ? true : item.clearable"
        unlink-panels
      />
      <!-- <span class="el-input__suffix-inner icon_end_fix" v-show="suffixShow">
        <i class="el-input__icon el-icon-date "></i>
      </span> -->
    </div>
  </el-form-item>
</template>

<script>
import _ from "lodash";
import moment from "moment";

export default {
  name: "dateCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      suffixShow: true,
      isPEvents: false,
      pickerOptions: {
        disabledDate: time => {
          if (this.item.pickerOptions) {
            if (
              this.item.pickerOptions[0] === false &&
              this.item.pickerOptions[1]
            ) {
              return moment(time).isAfter(moment(this.item.pickerOptions[1]));
            } else if (
              this.item.pickerOptions[1] === false &&
              this.item.pickerOptions[0]
            ) {
              return moment(time).isBefore(moment(this.item.pickerOptions[0]));
            } else if (
              this.item.pickerOptions[1] === false &&
              this.item.pickerOptions[0] === false
            ) {
              return false;
            } else {
              return (
                moment(time).isBefore(moment(this.item.pickerOptions[0])) ||
                moment(time).isAfter(moment(this.item.pickerOptions[1]))
              );
            }
          } else return false;
        }
      }
    };
  },
  methods: {
    itemMouseover(item) {
      if (
        !this.formData[item.prop] ||
        (!this.formData[item.prop][0] && !this.formData[item.prop][1])
      ) {
        this.isPEvents = true;
      }
      if (this.item.clearable !== false) {
        if (_.isArray(this.formData[item.prop])) {
          if (this.formData[item.prop][0] || this.formData[item.prop][1]) {
            this.suffixShow = false;
          }
        } else {
          if (this.formData[item.prop]) {
            this.suffixShow = false;
          }
        }
      }
    },
    itemMouseout() {
      this.isPEvents = false;
      this.suffixShow = true;
    },
    disabledMethod(item) {
      if (item.disabled) {
        const type = typeof item.disabled;
        if (type === "function") {
          return item.disabled(this.formData);
        } else {
          return item.disabled;
        }
      }
      return false;
    }
  },
  created() {
    if (this.item.dateType === "date") {
      this.pickerOptions.shortcuts = [
        {
          text: "今天",
          onClick(picker) {
            picker.$emit("pick", new Date());
          }
        },
        {
          text: "昨天",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit("pick", date);
          }
        },
        {
          text: "一周前",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", date);
          }
        }
      ];
    }
    // if (
    //   this.item.dateType === "daterange" ||
    //   this.item.dateType === "monthrange"
    // ) {
    //   this.pickerOptions.shortcuts = [
    //     {
    //       text: "最近一周",
    //       onClick(picker) {
    //         const end = new Date();
    //         const start = new Date();
    //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    //         picker.$emit("pick", [start, end]);
    //       }
    //     },
    //     {
    //       text: "最近一个月",
    //       onClick(picker) {
    //         const end = new Date();
    //         let dt = new Date();
    //         dt.setMonth(dt.getMonth() - 1);
    //         const start = new Date(dt.toLocaleDateString());
    //         picker.$emit("pick", [start, end]);
    //       }
    //     },
    //     {
    //       text: "最近三个月",
    //       onClick(picker) {
    //         const end = new Date();
    //         let dt = new Date();
    //         dt.setMonth(dt.getMonth() - 3);
    //         const start = new Date(dt.toLocaleDateString());
    //         picker.$emit("pick", [start, end]);
    //       }
    //     },
    //     {
    //       text: "最近六个月",
    //       onClick(picker) {
    //         const end = new Date();
    //         let dt = new Date();
    //         dt.setMonth(dt.getMonth() - 6);
    //         const start = new Date(dt.toLocaleDateString());
    //         picker.$emit("pick", [start, end]);
    //       }
    //     },
    //     {
    //       text: "最近一年",
    //       onClick(picker) {
    //         const end = new Date();
    //         let dt = new Date();
    //         dt.setFullYear(dt.getFullYear() - 1);
    //         const start = new Date(dt.toLocaleDateString());
    //         picker.$emit("pick", [start, end]);
    //       }
    //     }
    //   ];
    // }
  }
};
</script>

<style scoped lang="scss">
.icon_end_fix {
  color: #c0c4cc;
  position: absolute;
  right: 0;
  top: 0;
  display: inline;
}

.mix {
  width: 100%;
  position: relative;
}

// ::v-deep .el-input__inner {
//   padding-left: 15px !important;
// }

::v-deep .el-input__icon.el-range__close-icon {
  position: absolute;
  right: 0;
  top: 2px;
}

::v-deep .el-range-editor {
  padding: 0 !important;
}

::v-deep .el-range-separator {
  width: 20px !important;
  line-height: 32px !important;
}

::v-deep .el-range-input {
  width: calc((100%- 17px) / 2) !important;
}

// .mininner ::v-deep .el-input__suffix-inner {
//   pointer-events: none;
// }
::v-deep {
  .el-date-editor--monthrange.el-input,
  .el-date-editor--monthrange.el-input__inner {
    width: 100%;
  }
  .el-date-editor--daterange.el-input,
  .el-date-editor--daterange.el-input__inner {
    width: 100%;
  }
}
</style>
